<template>
  <div id="sellerManager">
    <el-row type="flex">
      <div>
        <!-- 更改头像 -->
        <el-upload id="avatar-uploader" class="avatar-uploader" :action="logoUpload.action" :show-file-list="logoUpload.showFileList" :limit="logoUpload.limit"
          :data="logoUpload.data" :name="logoUpload.name" :multiple="logoUpload.multiple" :on-error="onError"
          :on-success="handleAvatarSuccess" :before-upload="beforeUpload">
          <el-image  id="avatarImage"  :src="'http://localhost:8080/fileDownload/getSellerFace?sellerLogo='+this.$store.getters.seller.sellerLogo"
            style="width: 200px; height: 200px" fit="scale-down">
            <el-row :class="'imageError'" type="flex" align="middle" justify="center" slot="error">
              <i class="el-icon-picture-outline"></i>
            </el-row>
          </el-image>
        </el-upload>
      </div>
      <el-col style="margin:0 0.625rem;">
        <el-form ref="updateForm">


          <!-- 店铺名 -->
          <el-row class="" style="margin: 10px;" type="flex">
            <i class="el-icon-s-home icon" />
            <el-input class="form-item" name="sellerName" v-model="updateForm.sellerName" :placeholder="this.$store.getters.seller.sellerName"
              :disabled="disabled"></el-input>
          </el-row>
          <!-- 账号 -->
          <el-row class="" style="margin: 10px;" type="flex">
            <i class="el-icon-user-solid icon" />
            <el-input class="form-item" name="sellerAccount" v-model="updateForm.sellerAccount" :placeholder="this.$store.getters.seller.sellerAccount"
              :disabled="disabled"></el-input>
          </el-row>
          <!-- 电话 -->
          <el-row class="" style="margin: 10px;" type="flex">
            <i class="el-icon-phone icon" />
            <el-input class="form-item" name="sellerPhone" v-model="updateForm.sellerPhone" :placeholder="this.$store.getters.seller.sellerPhone"
              :disabled="disabled"></el-input>
          </el-row>
          <el-row class="" style="margin: 10px;" type="flex" justify="center">
            <el-button :type="locked?'danger':'primery'" @click="changeLock" :class="{'el-icon-lock': locked,
          'el-icon-unlock': !locked}">{{ locked?"解锁":"更新" }}</el-button>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {
    Message
  } from 'element-ui'

  export default {
    name: 'sellerManager',
    data() {
      return {
        locked: true,
        disabled: true,
        updateForm: {
          sellerAccount: '',
          sellerPhone: '',
          sellerName: ''
        },
        logoUpload: {
          data: {
            sellerAccount: ''
          },
          action: "http://localhost:8080/seller/update",
          limit: 1,
          name: "logo",
          showFileList: false,
          multiple: false
        },
        seller: '',
      };
    },
    computed: {
      Locked: () => {
        return {
          'el-icon-lock': this.locked,
          'el-icon-unlock': !this.locked
        }
      }
    },
    created() {

      this.logoUpload.data.sellerAccount = this.$store.getters.seller.sellerAccount
    },
    methods: {
      updateImg(params) {
        console.log(params)
      },
      changeLock() {
        this.$nextTick(() => {
          this.locked = !this.locked
          this.disabled = this.locked
          if (this.locked) {
            // console.log(this.$store.getters.seller)
            for (let item in this.updateForm) {
              if (this.updateForm[item] === '') {
                this.updateForm[item] = this.$store.getters.seller[item]
              } else {
                this.updateForm[item] = this.updateForm[item]
              }
            }
            console.log(this.updateForm)
            // if (this.updateForm.sellerAccount === '')
            //   this.updateForm.sellerAccount = this.$store.getters.seller.sellerAccount
            this.$store.dispatch("update", this.updateForm)
              .then(res => {
                Message({
                  message: '更新成功!',
                  type: 'success',
                  center: true,
                  duration: 2000
                });
              }).catch(err => {
                Message({
                  message: '更新失败!',
                  type: 'error',
                  center: true,
                  duration: 2000
                });
              })
          } else {
            // updateForm.sellerAccount=this.$store.getters.seller.sellerAccount
            // updateForm.sellerPhone=this.$store.getters.seller.sellerPhone
            // updateForm.sellerName=this.$store.getters.seller.sellerName
          }
        })

      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          Message({
            message: '上传头像图片只能是 JPG 格式!',
            type: 'error',
            center: true,
            duration: 1000
          });
        }
        if (!isLt2M) {
          Message({
            message: '上传头像图片大小不能超过 2MB!',
            type: 'error',
            center: true,
            duration: 1000
          });
        }
        return isJPG && isLt2M;
      },
      onError(err, file, fileList) {
        Message({
          message: '上传失败!',
          type: 'error',
          center: true,
          duration: 1000
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    }
  }
</script>

<style>
  #sellerManager{
    background-color: #FFFFFF;
  }
  input[disabled],
  input:disabled,
  input.disabled {
    font-weight: bold;
    color: #333;
    -webkit-text-fill-color: #333;
    -webkit-opacity: 1;
    opacity: 1;
  }

/*  .infoPanel {
    margin: 10px;
  } */

  .form-item {
    font-weight: bold;
    margin: 10px;
    outline: none;
    font-size: 20px;

  }

  .icon:after {
    content: ':';
    font-weight: bold;
  }

  .icon {
    font-size: 40px;
  }

  #avatarImage {
    border-radius: 6px;
  }

  .imageError {
    background-color: #c4c8d0;
    font-size: 30px;
    height: 100%;
  }

  .avatar-uploader .el-upload:hover:before {
    font-size: 30px;
    font-weight: bold;
    line-height: 200px;
    text-align: center;
    color: white;
    opacity: .5;
    height: 100%;
    width: 100%;
    background-color: #000000;
    z-index: 10;
    content: '更改LOGO';
    position: absolute;
  }

  .avatar-uploader .el-upload {
    height: 200px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>
